<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<link type="text/css" rel="stylesheet" href="../Public/css/reset.css">
<link type="text/css" rel="stylesheet" href="../Public/css/DateTimePicker.css">
<link type="text/css" rel="stylesheet" href="../Public/css/style.css">

<script type="text/javascript" src="../Public/script/jquery.js"></script>
<script type="text/javascript" src="../Public/script/distpicker.data.js"></script>
<script type="text/javascript" src="../Public/script/distpicker.js"></script>
<script type="text/javascript" src="../Public/script/DateTimePicker.js"></script>
<script type="text/javascript" src="../Public/script/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="../Public/layer/layer.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

</head>

<body>
<style>
.current{padding: 4px 11px;background:#FFC904 ;color: #fff; border: 1px solid #e5e5e5; font-size: 15px }
.num{ background: ; color: #009f8f;padding: 4px 11px;border: 1px solid #e5e5e5; font-size: 15px   }
.prev{border: 1px solid #e5e5e5; background: ;  color: #009f8f; font-size: 15px;padding: 4px 11px;}
.next{ border: 1px solid #e5e5e5; background: ; color: #009f8f; font-size: 15px;padding: 4px 11px; }

.ddd{border: 1px solid #e5e5e5; color:#009f8f;padding: 4px 11px;font-size: 15px}


</style>
<include file="Common:header"/>
    
    <!--contain-->
    <div class="contain">
        
        <div class="expCont">
            
            <div class="widthBlock">
                
                <div class="EC1">
                    <div class="form fl">
                        <div class="title">
                            预约体验
                        </div>
                        <form  name="form1" action="{:U('Tiyan/yuyue')}" method="post">
                        <div class="inputBlank">
                            <div class="inputBlock">
                                <input type="text" placeholder="您的姓名" required  name="name">
                            </div>
                            <div class="inputBlock" id="distpicker">
                                <select data-province="省" name="sheng" id="sheng">
                                    
                                </select><select data-city="市" name="shi" id="shi">
                                    
                                </select><select data-district="区" name="qu" id="qu">
                                    
                                </select>
                            </div>
                            <div class="inputBlock">
                                <select style="width:100%;" name="tiyan" id="tiyan">
                                <option value="0">体验门店</option>
                                <volist name="mendian" id="vo">
                                <option value="{$vo.address}">{$vo.address}</option>
                             </volist>
                            </select>
                            </div>
                            <div class="inputBlock">
                                <input class="datetime" type="text" name="time"  placeholder="体验日期" data-field="datetime" readonly required>
                            </div>
                            <div class="inputBlock">
                                <input type="text" placeholder="手机号码" name="tel" required>
                            </div>
                            <div class="inputBlock sp1">
                                <input type="checkbox" id="checkboxid" checked >我已阅读并接受<a href="#">《装修常见问题条款》</a>
                            </div>
                        </div>

                        <input type="hidden" id="yuyue" value="{$_SESSION['userid']}">
                        <div class="inputBlock btn">
                            <button id="butt" type="submit">立即预约</button>
                        </div>
                        </form>
                    </div>
                    <div class="banner fr">
                    
                        <div id="slideBox" class="slideBox">
                            <div class="hd">
                                <ul></ul>
                            </div>
                            <div class="bd">
                                <ul>
                                    <volist name="tylun" id="vo">
                                    <li><a href="#"><img src="Uploads/{$vo.pic}"></a></li>
                                    </volist>
                                </ul>
                            </div>
                        </div>
                        
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="EC2">
                    <div class="titleBlock">
                        <div class="title">
                            <h1>STORE  LOCATION</h1>
                            <h1>体验店位置</h1>
                        </div>
                    </div>
                    <div class="list">
                        <ul>
                      
                           <volist name="tiyan" id="vo">
                            <li>
                                <h1>{$vo.title}</h1>
                                <div class="img fl">
                                    <img width="190" height="140" src="Uploads/{$vo.img}">
                                </div>
                                <div class="text fr">
                                    <p>联系电话：{$vo.phone}</p>
                                    <p>详细地址：{$vo.address}</p>
                                    <a class="showMap" data-area="" data-address="{$vo.address}" href="javascript:;">查看地图</a>
                                </div>
                                <div class="clear"></div>
                            </li>
                            </volist>
                            <li class="clear"></li>
                        </ul>
                    </div>
                </div>
                
            </div>
            
        </div>
        <div id="dtBox"></div>
    </div>
    <!--contain end-->
    
    <!--bottom2-->
    <div class="bottom2Blank"></div>
    <div class="bottom2">
        <div class="widthBlock">
            <!--Pages-->
            <div class="pages">
                   <div  style="text-align: center; ">{$page}</div>  
            </div>
            <!--Pages-->
        </div>
    </div>
    <!--bottom2 end-->
    
    <!--map-->
    <div id="allmap" style="display:none;"></div>
    <!--map end-->
    
<include file="Common:footer"/>
    

<script>
jQuery(document).ready(function(e) {
    
    $("#distpicker").distpicker({
        autoSelect:false
    });
    
    $("#dtBox").DateTimePicker();
    
    jQuery(".slideBox").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"fold",autoPlay:true});
    
    var map = new BMap.Map("allmap");
    var point;
    var myGeo = new BMap.Geocoder();
    $(".showMap").click(function(){
        map.clearOverlays();
        layer.open({
            type:1,
            title:false,
            content:$("#allmap"),
            area:['1200px','540px;'],
            shadeClose:true
        })
        
        myGeo.getPoint($(this).attr("data-address"), function(point){
            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point));
            }else{
                alert("无法显示地图");
            }
        }, $(this).attr("data-area"));
    });
    





});

$(function(){

  $('#butt').click(function(){

 if(!$('#checkboxid').is(':checked')) {
   layer.alert('同意装修问题条款');
  return false;
    }

if($('#tiyan').val()==0) {
   layer.alert('请选择体验门店');
  return false;
    }


 var yuyue= $('#yuyue').val();
   if (yuyue=='') {

    layer.alert('请登录后预约');
     return false;
   }

  })
    

    $('#shi').change(function(){
        var sheng = $('#sheng').val();
        var shi = $('#shi').val();
      
       $('#tiyan').html("<option value='0'>体验门店</option>");

     $.ajax({

         url:'{:U("Tiyan/chengshi")}',
         type:'post',
         data:{
           'parm':sheng+shi,

         },
         dataType:'json',
         success:function(data){
               
           if (data!=0) {
          var str="<option value='0'>体验门店</option>";

          for (var i = 0; i < data.length; i++) {
            
            str+=' <option>'+data[i]['address']+'</option>';
                 


          }
            $('#tiyan').html(str);
       

           }

         }


     })





    })




})


</script>
    <script type="text/javascript">document.getElementById("menu6").className="curr";</script>
</body>
</html>
